<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>计算器  </title>
<style type="text/css">
div{width:300px;height:500px;margin:30px auto;border:1px solid #CCC;background:#666;}
p{width:300px;height:80px;background:#ccc;margin:0;padding:0; font-size:36px; line-height:80px;}
#p2{display:none;}
a{display:block;width:70px;height:70px;background:#444;float:left;text-align:center;line-height:70px;color:#CF3;text-decoration:none;font-size:30px;}
</style>
</head>

<body>
<div>
<p id="p1"></p>
<p id="p2"></p>
<a href="javascript:;" onclick="first(1);last(1)">1</a>
<a href="javascript:;" onclick="first(2);last(2)">2</a>
<a href="javascript:;" onclick="first(3);last(3)">3</a>
<a href="javascript:;" onclick="first(4);last(4)">4</a>
<a href="javascript:;" onclick="first(5);last(5)">5</a>
<a href="javascript:;" onclick="first(6);last(6)">6</a>
<a href="javascript:;" onclick="first(7);last(7)">7</a>
<a href="javascript:;" onclick="first(8);last(8)">8</a>
<a href="javascript:;" onclick="first(9);last(9)">9</a>
<a href="javascript:;" onclick="first(0);last(0)">0</a>
<a href="javascript:;" onclick="center(1)">+</a>
<a href="javascript:;" onclick="center(2)">-</a>
<a href="javascript:;" onclick="center(3)">*</a>
<a href="javascript:;" onclick="center(4)">/</a>
<a href="javascript:;" onclick="center(5)">%</a>
<a href="javascript:;" onclick="jisuan()">=</a>
<a href="javascript:;" onclick="guiling()">CE</a>

</div>
</body>
<script>
var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
left="";right="";
function first(n){
	left=left+n;
	p1.innerHTML=left;
	
	} 
function last(n){
	if(p2.style.display=="block"){
	right=right+n;
	p2.innerHTML=right;
	}
	}
function center(n){
	p1.style.display="none";
	p2.style.display="block";
	fuhao=n;
	num1=parseFloat(p1.innerHTML);
	}
function jisuan(){
	
	var num2=parseFloat(p2.innerHTML);
	p1.style.display="block";
	p2.style.display="none";
	switch(fuhao){
		case 1:	
		p1.innerHTML=(num1+num2);
		left='';
		right='';
		p2.innerHTML='';
		break;
		
		case 2:	
		p1.innerHTML=(num1-num2);
		left='';
		right='';
		p2.innerHTML='';
		break;
		
		case 3:	
		p1.innerHTML=(num1*num2);
		left='';
		right='';
		p2.innerHTML='';
		break;
		
		case 4:	
		p1.innerHTML=(num1/num2);
		left='';
		right='';
		p2.innerHTML='';
		break;
		
		case 5:	
		p1.innerHTML=(num1%num2);
		left='';
		right='';
		p2.innerHTML='';
		break;
		}
	}
	
function guiling(){
	p1.style.display="block";
	p2.style.display="none";
	left="";
	right='';
	fuhao='';
	p1.innerHTML='0';
	p2.innerHTML='';
	}
</script>

</html>
